<script>
import { reactive, toRefs,onMounted, getCurrentInstance  } from "vue";
import FlowhN10to14 from "@/components/Charts/LineCharts/inoutFlow/N/FlowhN10to14.vue";
import FlowhN14to18 from "@/components/Charts/LineCharts/inoutFlow/N/FlowhN14to18.vue";
import FlowhN18to22 from "@/components/Charts/LineCharts/inoutFlow/N/FlowhN18to22.vue";
import GenBaghN from "@/components/Charts/LineCharts/inoutFlow/N/GenBaghN.vue";
export default {
  components: {FlowhN10to14,FlowhN14to18,FlowhN18to22,GenBaghN,
  },
  setup() {
    const state = reactive({
      isGetData :false,
      labelListN10to14: ["10:00", "11:00", "12:00", "13:00", "14:00"],
      labelListN14to18: ["14:00", "15:00", "16:00", "17:00", "18:00"],
      labelListN18to22: ["18:00", "19:00", "20:00", "21:00", "22:00"],
      form:{
        hour: "12"
      },
      dataListFlowN10to14: [
        175,150, 230, 224, 218, 135, 200, 129, 208, 125,
      ],
      dataListFlowN14to18:[
      160, 208, 125, 109, 170, 159, 209, 109, 201, 175,      
      ],
      dataListFlowN18to22:[
      100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
      ],

      dataListGBN:[100, 209, 109, 201],
    });
    const { proxy } = getCurrentInstance();
    onMounted(async () => {
      //请求接口
      proxy.$API.statGate.recentlyHourFlowList.get(state.form).then((res) => {
      //调用成功           
      if (res.code == 200) {
        //初始化
        state.dataListFlowN10to14=[]
        state.dataListFlowN14to18=[]
        state.dataListFlowN18to22=[]
        for (let i = 0; i < 5; i++) {
          state.dataListFlowN10to14.push(parseInt(res.data[i]["gdCountIn"]));
          state.dataListFlowN10to14.push(parseInt(res.data[i]["gdCountOut"]));
        }
        for (let i = 4; i < 9; i++) {
          state.dataListFlowN14to18.push(parseInt(res.data[i]["gdCountIn"]));
          state.dataListFlowN14to18.push(parseInt(res.data[i]["gdCountOut"]));
        }
        for (let i = 7; i < 12; i++) {
          state.dataListFlowN18to22.push(parseInt(res.data[i]["gdCountIn"]));
          state.dataListFlowN18to22.push(parseInt(res.data[i]["gdCountOut"]));
        }
        }
        console.log(state.dataListFlowN10to14);
        state.isGetData = true;
      });
    });
    return { ...toRefs(state) };
  },
}
</script>
<template>
 <div style="display: flex; height:50%" v-if="isGetData">
   <FlowhN10to14 :labelListN10to14="labelListN10to14" :dataListFlowN10to14="dataListFlowN10to14" />
   <FlowhN14to18 :labelListN14to18="labelListN14to18" :dataListFlowN14to18="dataListFlowN14to18" />
   <FlowhN18to22 :labelListN18to22="labelListN18to22" :dataListFlowN18to22="dataListFlowN18to22" />
 </div>
 <div style="display: flex; height:50%">
      <GenBaghN :dataListGBN="dataListGBN" />
 </div>
</template>
<style scoped>
</style>






















